<template>
	<view class="home">

		<view class="v_list">
			
			<view class="">
				<image :src="swipers.pic" mode="" style="width:100%;height: 200px;"></image>
			</view>
			
			<view style="padding: 0px 10px;">
				<view class="" style="text-align: center;">
					<text style="color: #000;font-size: 14px;font-weight: bold;padding-top: 20px;">{{swipers.title}}</text>
				</view>
				
				<view class="" style="padding-top:8px;">
					<text style="color: #4D4D4D;font-size: 10px;color: #4D4D4D;">报名费:
					<text style="color: #4D4D4D;color:#F14399;font-weight: bold;font-size: 18px;">{{swipers.op}}</text>元</text>
				</view>
				
				<view style="margin-top: 20px;height: 5px;background-color: #F6F6F6;"></view>
				
				<view class="" style="margin-top: 15px;display: flex;">
					<view class="" style="width: 75%;">
						<text style="color: #F14399;font-size: 14px;font-weight: bold;">参加嘉宾:</text>
					</view>
					<view class="" >
						<text style="font-size: 14px;">已参加<text style="color:#F14399;font-weight: bold;font-size: 18px;">{{swipers.count}}</text>人</text>
					</view>
				</view>
				
				<view style="display: flex;margin: 10px;">
					<view v-for="item in swipers2" :key="item.id" style="flex-flow:column wrap;">
						<image :src="item.avatar" mode="" style="width: 40px;height: 40px;border-radius:50%;margin-left: 3px;">
						</image>
					</view>
				</view>
				
				<view style="margin-top: 10px;height: 5px;background-color: #F6F6F6;"></view>
				
				<view class="" style="margin-top: 10px;">
					<text style="color: #F14399;font-size: 14px;font-weight: bold;">活动地址:</text>
					<view class="" style="color: #4D4D4D;font-size: 12px;">{{swipers.address}}</view>
				</view>
				
				<view style="margin-top: 10px;height: 5px;background-color: #F6F6F6;"></view>
				
				<view class="" style="margin-top: 10px;">
					<text style="color: #F14399;font-size: 14px;font-weight: bold;">活动时间:</text>
					<view class="" style="color: #4D4D4D;font-size: 10px;">
						<span v-if="swipers.end_time < new Date().toISOString()">活动已结束</span>
						<span v-else>{{swipers.start_time}}至{{swipers.end_time}}</span>
					</view>
				</view>
				
				<view style="margin-top: 10px;height: 5px;background-color: #F6F6F6;"></view>
				
				<view class="" style="margin-top: 10px;">
					<text style="color: #F14399;font-size: 14px;font-weight: bold;">活动详情:</text>
					<view class="" style="margin-bottom: 20px;font-size: 14px;">
					<rich-text :nodes="swipers.contents"></rich-text>
					</view>
				</view>
			
			</view>
			
		</view>

		<view v-if="seens" style="background-color: #fff;width: 343px;height: 400px;position:fixed;top:100px;left:20px;border-radius: 10px;box-shadow: 1px 1px 2px 2px rgba(0, 0, 0, 0.1);text-align: center;">
			 <view class="" style="margin-top: 17px;">
				<text style="color: #F14399;font-size: 18px;">联系客服</text> 
			 </view>
			 
			 <image src="../../static/tab_img/touxiang.png" mode="" style="margin-top: 17px;width: 80px;height: 80px;border-radius:50%;margin-left: 3px;">
			 </image>
			 <view class="" style="margin-top: 5px;">
			 <text style="font-size: 14px;">15145678989</text>
			  </view>
			<view class="" style="margin-top: 17px;border-radius: 10px;margin: 0px auto;">
				<image src="../../static/tab_img/weixin.png" mode="" style="width: 160px;height: 160px;"></image>
			</view>
			
			<view class="" style="margin-top: 17px;">
			<text style="font-size: 14px;">长按二维码添加客服为您牵线</text>
			 </view>
		</view>
		
		
		<view class="dibu_nav">
			
			<view class="dibu_nav1" @click="zl_kf()">
			   <view class="" style="margin-top: 15px;color: #fff;">
			   	<text>联系客服</text>
			   </view>
			</view>
			
			<view class="dibu_nav2" @click="btn()" v-if="seen">
				<view class="" style="margin-top: 15px;color: #fff;">
					<text>点击报名</text>
				</view>
			</view>
			
			<view class="dibu_nav2" style="background-color: #DFDFDF;" v-else>
				<view class="" style="margin-top: 15px;color: #fff;">
					<text style="color: darkred;">活动已结束</text>
				</view>
			</view>
			
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:"",
				swipers:{},
				swipers2:[],
				seen:true,
				seens:false,
			}
		},
		onLoad(option) {
			this.id=option.id
			this.hd_details()
		},
		methods: {
			//获取报名详情
			async hd_details(){
				const res= await this.$myRuquest({
					url: '/index/dsnv.activities/hd_details?id='+this.id
				})
     
				if(res.data.code==200){
					this.swipers=res.data.date;
					this.swipers2=res.data.user_list;
					
					if(res.data.end_times==0){
						this.seen=false
					}
				}
			},
			
			//联系客服
			zl_kf(){
				this.seens=!this.seens
			},
			colse_weixin(){
				this.seens=false;
			},
			//点击报名
			async btn(){
				//查看是否登录
				
				var dd=this.checkGuide()
				
	            
				if(dd !== 1){
					
					const launchFlag = uni.getStorageSync('my_info');
					
					const res= await this.$myRuquest({
						url: '/index/dsnv.uhuodong/preCreate?pid='+this.id+"&uid="+launchFlag.id
					})
					
					if(res.data.code==200){
						
						if (res.data.response['result_msg'] == "SUCCESS") {
							window.location.href = res.data.response['qr_code'];
						}else{
							uni.showToast({
								title:res.data.info,
								duration: 2000,
								icon: 'none'
							})
						}
						
					}else{
						uni.showToast({
							title:res.data.info,
							duration: 2000,
							icon: 'none'
						})
					}
				}
				
			},
			//获取个人数据
			checkGuide() {
			
				// 思路： 检测是否有启动缓存，如果没有，就是第一次启动，第一次启动就去 启动介绍页面
				const launchFlag = uni.getStorageSync('my_info');
				
				if (!launchFlag.id || 0 === launchFlag.id.length) {
			
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/login/login'
						});
					}, 400)
			
					uni.showToast({
						title: '请先登录',
						duration: 2000,
						icon: 'none'
					})
					return false;
				}
			},
		}
	}
</script>

<style lang="scss">
	
	.home{
		margin-top: 20px;
		background-color: #F6F6F6;
		
		.v_list{
			
			background-color: #fff;
			margin: 0px 10px;
			height: 100%;
			
			overflow: hidden;
			-ms-box-shadow:0px 3px 5px #DDDDDD;
			-moz-box-shadow:0px 3px 5px #DDDDDD;
			-webkit-box-shadow:0px 3px 5px #DDDDDD;
			box-shadow:0px 3px 5px #DDDDDD;
			
			margin-bottom: 15px;
			
		}
		.dibu_nav{
		     margin: 0px 10px;
			 padding-bottom: 100px;
				
				.dibu_nav1{
				
					width: 50%;
					position:fixed;
					bottom:0px;
					left:0px;
					text-align: center;
					height: 54px;
					background-color:#40BCF0;
					
				}
				
				.dibu_nav2{
					width: 50%;
					position:fixed;
					bottom:0px;
					right:0px;
					text-align: center;
					height: 54px;
					background-color:#F14399;
				}
				
			}
		
	}
	

</style>
